// axios获取班级概况
function getSurvey() {
    axios({
        url: '/student/overview',
        method: 'get',
    }).then(({ data: { data } }) => {
        for (const key in data) {
            document.querySelector(`.${key}`).innerText = data[key];
        }
        // console.log( data)
    })
}
getSurvey()

// 发送axios请求，获取数据
{
    axios({
        url: '/student/list',
        method: 'get',
    }).then(({ data: { data } }) => {
        renderSalaryLine(data)
        renderpie(data)
    })
}
const myChartLine = echarts.init(document.querySelector('.line'));
function renderSalaryLine(data) {
    // 数据处理
    const names = [];
    const salarys = [];
    const truesalarys = [];
    data.forEach(item => {
        names.push(item.name)
        salarys.push(item.salary)
        truesalarys.push(item.truesalary)
    });

    // 渲染处理
    // const myChart = echarts.init(document.querySelector('.line'));
    const option = {
        title: {
            text: '薪资 Salary'
        },
        tooltip: {
            trigger: 'axis'
        },
        // 折线
        legend: {
            data: ['期望薪资', '实际薪资',]
        },
        // 进度条卡在里面
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: names
        },
        yAxis: {},
        dataZoom: [
            {
                type: 'slider',
                start: 0,
                end: 10,
            },
            {
                type: 'inside',
                start: 0,
                end: 10,
            }
        ],
        series: [
            {
                name: '期望薪资',
                type: 'line',
                // 实心
                symbol: 'none',
                // 曲线图
                smooth: true,
                stack: 'Total',
                data: salarys
            },
            {
                name: '实际薪资',
                type: 'line',
                // 实心
                symbol: 'none',
                // 曲线图
                smooth: true,
                stack: 'Total',
                data: truesalarys
            },
        ]
    };
    myChartLine.setOption(option);
    // window.onresize = myChart.resize;
}

const myChartPie = echarts.init(document.querySelector('.pie'));
function renderpie(data) {

    // 处理数据
    const newdata = [];
    data.forEach(item => {
        const index = newdata.findIndex(element => element.name === item.province)

        if (index === -1) {
            newdata.push({ name: item.province, value: 1 })
        } else {
            newdata[index].value++
        }
    })

    // console.log(newdata)
    // 数据渲染成饼图
    // const myChartPie = echarts.init(document.querySelector('.pie'));
    // option
    const option = {
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [25, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: newdata,
            }
        ]
    };
    myChartPie.setOption(option);
    // window.onresize = myChart.resize;
}

// 切换出每一次的成绩
{
    const toggleBatchBtn = document.querySelector('#toggleBatchBtn');
    const batch = document.querySelector('#batch');
    toggleBatchBtn.addEventListener('click', function (e) {
        if (batch.style.display === 'flex') {
            batch.style.display = "none"
        } else {
            batch.style.display = "flex"
        }
    })

    // 委托给ul
    batch.addEventListener('click', function (e) {
        if (e.target.tagName === "A") {
            const batch = e.target.dataset.index
            // 删除上一个
            this.querySelector(".activeA").classList.remove("activeA");
            // 给当前添加
            e.target.classList.add("activeA");
            axios({
                url: '/score/batch',
                method: 'get',
                params: { batch },
                // }).then( ({data:{code, message,}}) => {
            }).then(({ data: { code, message, data } }) => {
                if (code !== 0) {
                    toastr.warning(message, "消息提示")
                } else {
                    // toastr.success(message, "消息提示")
                    const { avgScore, group, gt60, gt80, lt60 } = data;
                    renderBar(avgScore, group, gt60, gt80, lt60)
                }
            })
        }
    })
}

// 柱状图初始化
{
    axios({
        url: '/score/batch',
        method: 'get',
        params: { batch: 1 },
    }).then(({ data: { code, message, data } }) => {
        if (code !== 0) {
            toastr.warning(message, "消息提示")
        } else {
            // toastr.success(message, "消息提示")
            const { avgScore, group, gt60, gt80, lt60 } = data;
            renderBar(avgScore, group, gt60, gt80, lt60)
        }
    })
}

const myChartBarChart = echarts.init(document.querySelector('.barChart'));
function renderBar(avgScore, group, gt60, gt80, lt60) {
    // 基于准备好的dom，初始化echarts实例
    // const myChartBarChart = echarts.init(document.querySelector('.barChart'));

    // 指定图表的配置项和数据
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            top: 40,
            bottom: 20,
        },
        legend: {
            top: 10,
            data: ['平均分', '低于60分人数', '60到80分之间', '高于80分人数']
        },
        xAxis: [
            {
                type: 'category',
                // group 组数
                data: group,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value} 人'
                }
            }
        ],
        series: [
            {
                name: '平均分',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 分';
                    }
                },
                data: avgScore,
            },
            {
                name: '低于60分人数',
                type: 'bar',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 人';
                    }
                },
                data: lt60,
            },
            {
                name: '60到80分之间',
                type: 'bar',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 人';
                    }
                },
                data: gt60
            },
            {
                name: '高于80分人数',
                type: 'bar',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 人';
                    }
                },
                data: gt80
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChartBarChart.setOption(option);
    // console.log(myChart)
    // window.onresize = myChart.resize;
}

[myChartLine, myChartPie, myChartBarChart].forEach(item => {
    window.addEventListener("resize", function () {item.resize();})
})